@import '~@styles/common.less';

.tocWrap {
  width: 260px;
  margin-top: 10px;
  margin-left: 10px;
  background-color: @fff;
  border-radius: 5px;

  .mackNav {
    border-radius: 5px;

    .scrollbar {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;

      & > :first-child {
        &::-webkit-scrollbar {
          display: none;
        }
        // 如何禁止子元素滚动触发父元素滚动
        overscroll-behavior: contain;
      }
    }
  }

  .tocText {
    font-weight: 500;
    font-size: 16px;
    color: #1d2129;
    border-bottom: 1px solid @background;
    padding: 10px;
  }

  .tocList {
    text-align: left;
    background-color: @fff;
  }

  :global(.markdown-navigation .title-anchor) {
    padding: 0 5px 0 10px;
    font-size: 14px;
    .ellipsis();
  }

  :global(.markdown-navigation .title-anchor small) {
    font-size: 14px;
    margin: 0 0.8em 0 0;
  }

  :global(.markdown-navigation .title-anchor.active) {
    position: relative;
    color: @menu-active;

    &::after {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      width: 4px;
      height: 18px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      background-color: @menu-active;
    }
  }

  :global(.markdown-navigation) {
    :global(.title-level4) {
      color: @font-2;
      padding-left: 20px;
    }
    :global(.title-level5) {
      color: @font-2;
      padding-left: 20px;
    }
    :global(.title-level6) {
      color: @font-2;
      padding-left: 20px;
    }
  }
}

.dark {
  background-color: @dark-bgc-deep;

  .mackNav {
    background-color: @dark-bgc-deep;
  }

  .tocText {
    border-bottom: 1px solid @dark-gray;
    color: @dark-fc;
  }

  .tocList {
    background-color: @dark-bgc-deep;
  }

  :global(.markdown-navigation .title-anchor) {
    &:hover {
      background-color: @dark-gray;
      color: @dark-fc;
    }
  }

  :global(.markdown-navigation .title-anchor.active) {
    color: @menu-active;
    background-color: @dark-gray;

    &::after {
      background-color: @menu-active;
    }

    &:hover {
      background-color: @dark-gray;
      color: @menu-active;
    }
  }

  :global(.markdown-navigation) {
    :global(.title-level3) {
      color: @dark-fc;
      padding-left: 20px;
    }
    :global(.title-level4) {
      color: @font-3;
      padding-left: 20px;
    }
    :global(.title-level5) {
      color: @font-2;
      padding-left: 20px;
    }
    :global(.title-level6) {
      color: @font-2;
      padding-left: 20px;
    }
  }
}

@media screen and (max-width: 960px) {
  .tocWrap {
    display: none;
  }
}
